<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(background.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(246, 250, 250, 0.6);
            box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
            border-radius: 300px;
        }

        #loginDiv:hover{
            filter: grayscale(60%);
        }

        input{
            text-align: center;
            border:none;
            background-color: rgba(239, 248, 250, 0.1);
            border-bottom:1px solid rgb(80, 196, 241);
            width: 200px;

        }

        #L_login {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }

        #L_register {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>

<body>
<div id="loginDiv">
    <form action="" id="form">
        <table>
            <h2 style="text-align: center; color: rgb(59, 194, 248);">立即登录</h2></br>
            <tr><td style="text-align: center; color: gray;">邮箱</td></tr>
            <tr><td><input class="line" type="text" id="L_email"></td></tr>
            <tr><td style="text-align: center; color: gray;">密码</td></tr>
            <tr><td > <input class="line" type="password" placeholder="密码长度至少为6位" id="L_pwd"></td></tr>
        </table>
        </br>
        <p style="text-align: center;color: rgb(59, 194, 248);"><a href="#">忘记密码?</a></p>
        <div style="text-align: center;margin-top: 15px;">
            <input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()>
            <input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()>
        </div>
    </form>
</div>
<script>
    L_email.onchange = function(){
        var L_email = this.value;
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if(!reg.test(L_email)){
            alert("邮箱格式不正确，请重新输入！");
            return false;
        }
    }
    L_pwd.onchange = function(){
        var L_pwd = this.value;
        var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
        if(!reg.test(L_pwd)){
            alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
            return false;
        }
    }

    var email=localStorage.getItem("email");
    var password=localStorage.getItem("password");
    console.log("email:"+email);
    console.log("pwd:"+password);

    function jump1(){
        console.log(document.getElementById("L_email").value);
        console.log(+document.getElementById("L_pwd").value);

        var Email = document.getElementById("L_email");
        var Password = document.getElementById("L_pwd");

        if(email==document.getElementById("L_email").value && password==document.getElementById("L_pwd").value){
            alert("登录成功，点击确定进入我的个人相册！");
            window.location.href="My_Album.html";
        }
        else if(Email.value == "" || Password.value =="") {
            alert("邮箱或密码不能为空！");
            return false;
        }
        else{
            alert("邮箱或密码错误！");
            return false;
        }
    }
    function jump2(){
        window.location.href="register.html";
    }
</script>
</body>
</html>